<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
    <div id="chart"></div>

    <script>
        // 数据
        const data = [
            {category: 'A', value: 25},
            {category: 'B', value: 15},
            {category: 'C', value: 35},
            {category: 'D', value: 20},
            {category: 'E', value: 10}
        ];

        // 宽高设置
        const width = 500;
        const height = 90;
        const margin = {top: 20, right: 20, bottom: 30, left: 40};
        const innerWidth = width - margin.left - margin.right;
        const innerHeight = height - margin.top - margin.bottom;

        // 创建SVG容器
        const svg = d3.select("#chart")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

        // 创建比例尺
        const xScale = d3.scaleBand()
            .domain(data.map(d => d.category))
            .range([0, innerWidth])
            .padding(0.2);

        const yScale = d3.scaleLinear()
            .domain([0, d3.max(data, d => d.value)])
            .range([innerHeight, 0]);

        // 添加X轴
        svg.append("g")
            .attr("transform", `translate(${margin.left}, ${height - margin.bottom})`)
            .call(d3.axisBottom(xScale));

        // 添加Y轴
        svg.append("g")
            .attr("transform", `translate(${margin.left}, ${margin.top})`)
            .call(d3.axisLeft(yScale));

        // 绘制条形
        svg.selectAll("rect")
            .data(data)
            .enter()
            .append("rect")
            .attr("x", d => xScale(d.category) + margin.left)
            .attr("y", d => yScale(d.value) + margin.top)
            .attr("width", xScale.bandwidth())
            .attr("height", d => innerHeight - yScale(d.value))
            .attr("fill", "steelblue");
    </script>
</body>
</html>